@extends('layout.default')

@section('content')

  <div class="weui-form">
    <form class="form-horizontal" id="wx" autocomplete="off">
      {{ csrf_field() }}
      <input type="hidden" name="uuid" value="{{$member->uuid}}">
      <input type="hidden" name="gendar" value="">
      <input type="hidden" name="birthday" value="">
      @include('layout.header')
      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells__title">填写应聘信息</div>
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" name="mobile" type="tel" placeholder="请输入手机号码" maxlength="11">
              </div>
            </div>
            <div class="weui-cell weui-cell_active weui-cell_vcode">
              <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" name="smscode" value="" type="tel" placeholder="请输入验证码" maxlength="6">
              </div>
              <div class="weui-cell__ft">
                <button class="weui-btn weui-btn_default weui-vcode-btn sms">获取验证码</button>
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" name="name" type="text" placeholder="姓名" maxlength="20">
              </div>
            </div>
            <div class="weui-cell weui-cell_access" id="showGendar">
              <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
              <div class="weui-cell__bd label">
              </div>
              <div class="weui-cell__ft"></div>
            </div>
            <div class="weui-cell weui-cell_access" id="showDatePicker">
              <div class="weui-cell__hd"><label class="weui-label">出生日期</label></div>
              <div class="weui-cell__bd label">
              </div>
              <div class="weui-cell__ft"></div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd">
                <textarea class="weui-textarea" name="desc" placeholder="特长简介" rows="4"></textarea>
              </div>
            </div>
          </div>


        </div>

      </div>

      <div class="weui-form__tips-area">
        <p class="weui-form__tips">
          <a href="{{route('content','intro')}}" class="weui-footer__link">查看招聘信息</a>
        </p>
      </div>

      <div class="weui-form__opr-area" style="margin-bottom: 20px;">
        <button class="weui-btn weui-btn_primary" id="btnLogin">确定</button>
      </div>
      <div class="weui-form__tips-area">
        <p class="weui-form__tips">
          <img src="/assets/images/qrcode.jpg" />
        </p>
        <p class="weui-form__tips">
          <a href="javascript:;" class="weui-footer__link">长按二维码，关注我们的公众号</a>
        </p>
      </div>
    </form>

  </div>
@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
  <script src="//res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
  <script type="text/javascript">
      $(function () {

          $('#showDatePicker').on('click', function () {
              var that = $(this);
              weui.datePicker({
                  start: 1970,
                  end: new Date().getFullYear(),
                  defaultValue: [1999, 9, 9],
                  onChange: function (result) {
                      //console.log(result);
                  },
                  onConfirm: function (result) {
                      $("input[name='birthday']").val(result[0]['value'] + '-' + result[1]['value'] + '-' + result[2]['value']);
                      console.log($("input[name='birthday']").val());
                      that.find('.label').text(result[0]['label'] + result[1]['label'] + result[2]['label']);
                      console.log(result);
                  },
                  title: '请选择出生日期'
              });
          });

          $('#showGendar').on('click', function () {
              var that = $(this);
              weui.picker([{
                  label: '男',
                  value: 1
              }, {
                  label: '女',
                  value: 2
              }], {
                  onChange: function (result) {
                      //console.log(result);
                  },
                  onConfirm: function (result) {
                      $("input[name='gendar']").val(result[0]['value']);
                      that.find('.label').text(result[0]['label']);
                      console.log(result);
                  },
                  title: '请选择性别'
              });
          });

          $('.sms').on('click', function () {
              var count = 60;
              var uri = '{{route('smsRecruit')}}';

              $.post(uri, {
                  '_token': $("input[name='_token']").attr('value'),
                  'mobile': $("input[name='mobile']").val(),
                  'is_submit': true
              }, function (data) {
                  layer.msg(data.message, {time: 1000, shift: -1}, function () {

                      const countDown = setInterval(() => {

                          if (count === 0) {
                              $(this).text('获取验证码').removeAttr('disabled');
                              $(this).removeClass("grey");
                              clearInterval(countDown);
                          } else {
                              $(this).attr('disabled', true);
                              $(this).addClass("grey");
                              $(this).text(count + '秒后重新发送');
                          }
                          count--;
                      }, 1000);

                      if (data.status === true && data.url != null) {
                          $(window).attr('location', data.url);
                      }
                  });

              }, 'json').error(function (data) {
                  layer.msg(data.responseJSON.message);
              });

          });


          $("#wx").validate({

              onfocusout: false,
              onkeyup: false,

              rules: {
                  mobile: {required: true, isMobile: true},
                  smscode: {required: true, digits: true, maxlength: 6, minlength: 6},
                  name: {required: true, isChinese: true, minlength: 2},
                  gendar: {required: true},
                  birthday: {required: true, date: true},
                  desc: {required: true, minlength: 20},
              },
              messages: {
                  mobile: {required: "请填写手机号码"},
                  smscode: {required: "请填写验证码", maxlength: "验证码格式不正确", minlength: "验证码格式不正确", digits: "验证码格式不正确"},
                  name: {required: "请填写姓名", minlength: "名字不合法"},
                  gendar: {required: "请选择性别"},
                  birthday: {required: "请选择出生日期", date: "格式不正确"},
                  desc: {required: "请填写简介", minlength: "内容不能少于20字"},
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.tips(v.message, v.element, {tips: 3, time: 2000});
                      //$(v.element).closest('.weui-cell').addClass('weui-cell_warn');
                      return false;
                  });
              },

              submitHandler: function (form) {
                  $.post('{{route('recruit',$member->uuid)}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'mobile': $("input[name='mobile']").val(),
                      'smscode': $("input[name='smscode']").val(),
                      'name': $("input[name='name']").val(),
                      'gendar': $("input[name='gendar']").val(),
                      'birthday': $("input[name='birthday']").val(),
                      'desc': $("textarea[name='desc']").val(),
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {time: 1000, shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }

          });


      });
  </script>

@stop